<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		.mybody{
			width: 100%;
		}
		.head{
			width: 100%;
			text-align: center;
			margin-top: 56px;
		}
		.head p{
			color: red;
			font-size: 30px;
			margin: 0;
			text-shadow:1px 1px 0px #000000;
		}
		.head span{
			line-height: 28px;
			font-size: 14px;
			opacity: 0.9;
		}
		.content{
			width: 100%;
		}
		.contentOne{
			border: 1px solid;
			width: 358px;
			height: 40px;
			border-color: gainsboro;
			border-radius: 4px 4px 0px 0px;
			margin-top: 24px;
			margin-left: 39.2%;
			background-color: #f5f5f5;
		}
		.contentOne b{
			font-size: 14px;
			margin-left: 4%;
			line-height: 40px;
		}
		.contentTwo{
			border: 1px solid;
			width: 358px;
			height: 325px;
			border-color: gainsboro;
			margin-left: 39.2%;
			border-top:none;
			border-radius: 0px 0px 4px 4px;
		}
		.con{
			margin-left: 4.1%;
			padding-top: 35px;
		}
		.con1{
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 4px 0px 0px 4px;
			width: 34px;
			height: 32px;
			background-color: #f5f5f5;
			text-align: center;
			float: left;
		}
		.con1 img{
			height: 12.7px;
			margin-top: 11px;
		}
		.con2{
			border-bottom: none;
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 0px 4px 4px 0px;
			width: 306px;
			height: 32px;
			margin-left: 20px;
		}
		.con2 input{
			border: none;
			height: 28px;
			width: 285px;
			border-radius: 0px 4px 4px 0px;
			font-size: 14px;
			margin-top: 1px;
			margin-left: 1px;
		}
		.con3{
			margin-left: 4.1%;
			padding-top: 15px;
		}
		.con4{
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 4px 0px 0px 4px;
			width: 34px;
			height: 32px;
			background-color: #f5f5f5;
			text-align: center;
			float: left;
		}
		.con4 img{
			height: 12.7px;
			margin-top: 11px;
		}
		.con5{
			border-bottom: none;
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 0px 4px 4px 0px;
			width: 306px;
			height: 32px;
			margin-left: 20px;
		}
		.con5 input{
			border: none;
			height: 28px;
			width: 285px;
			border-radius: 0px 4px 4px 0px;
			font-size: 14px;
			margin-top: 1px;
			margin-left: 1px;
		}
		.con6{
			border-radius: 2px;
			background-color:#000000;
			color: white;
			width: 60px;
			height: 25.9px;
			font-size: 13.6px;
			margin-left: 4.1%;
			margin-top: 10.8px;
			line-height: 26px;
			
		}
		.con6 span{
			margin-left: 5px;
		}
		.con7{
			margin-left: 4.1%;
			padding-top: 11px;
		}
		.con8{
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 4px 0px 0px 4px;
			width: 34px;
			height: 32px;
			background-color: #f5f5f5;
			text-align: center;
			float: left;
		}
		.con8 img{
			height: 12.7px;
			margin-top: 11px;
		}
		.con9{
			border-bottom: none;
			border: 1.3px solid;
			border-color: gainsboro;
			border-radius: 0px 4px 4px 0px;
			width: 306px;
			height: 32px;
			margin-left: 20px;
		}
		.con9 input{
			border: none;
			height: 28px;
			width: 285px;
			border-radius: 0px 4px 4px 0px;
			font-size: 14px;
			margin-top: 1px;
			margin-left: 1px;
		}
		button{
			border:none;
			background-color: #428bca;
			border-radius: 4px;
			width: 54px;
			height: 34px;
			color: white;
			margin-top: 14px;
			margin-left: 40.8%;
			font-size: 14px;
		}
		button:hover{
			background-color: #3071a9;
		}
		hr{
			width: 90%;
			margin-top: 19px;
			opacity: 0.2;
		}
		.con10{
			font-size: 14px;
			margin-top: 20px;
			margin-left: 4%;
		}
		.con10 a{
			color: #42aae2;
			text-decoration:none;
		}
	</style>
	<body>
		<div class="mybody">
			<div class="head">
				<p>用户登录</p>
				<span>(授权访问)</span>
			</div>
			<div class="content">
				<div class="contentOne">
					<b>请输入登录信息</b>
				</div>
				<div class="contentTwo">
					<div class="con">
						<div class="con1">
							<img src="img/图层%201.png" >
						</div>
						<div class="con2">
							<input type="text" name="" id="user" value="" placeholder="   在此输入账号" />						
						</div>
					</div>
					<div class="con3">
						<div class="con4">
							<img src="img/图层%202.png" >
						</div>
						<div class="con5">
							<input type="password" name="" id="pass" value="" placeholder="   在此输入密码" />						
						</div>
					</div>
					<div class="con6">
						<span>4495</span>
					</div>
					<div class="con7">
						<div class="con8">
							<img src="img/图层%202.png" >
						</div>
						<div class="con9">
							<input type="text" name="" id="yzm" value="" placeholder="   在此输入验证码" />						
						</div>
					</div>
					<button type="button">登录</button>
					<hr >
					<div class="con10">
						<span>未注册 ? </span><a href="a注册.html">点这儿</a>
					</div>
				</div>
				
			</div>
		</div>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		
		
		//回车键等于登录按钮
		$(window).keydown(function (event) {
			if (event.keyCode == 13) {
				$("button").click();
			}
		});
		
		
		//禁止复制代码
		document.onselectstart=new Function("event.returnValue=false;");
		
		
		
		//插入一个随机数
			$('.con6 span').html(Math.floor((Math.random()*10000%8999)+1000))
		//点击验证码触发的一个随机数
			$('.con6').click(function(){
				$('.con6 span').html(Math.floor((Math.random()*10000%8999)+1000))
				
			})
		
		
		
			$("button").click(function(){
				let user1 = $('#user').val()
				let pass1 = $('#pass').val()
				let yzm1 = $('#yzm').val()
				let	yan = $('.con6 span').html()
				console.log(yan)
				if(user1 == ""){
					alert("账号输入不能为空")
				}else if(pass1 ==""){
					alert("密码输入不能为空")
				}else if(yzm1 != yan){
					alert("验证码错误")
					$('.con6 span').html(Math.floor((Math.random()*10000%8999)+1000))
				}else{
					$.ajax({
						url:"http://student.qhynice.top/j_login.php",
						type:"get",
						data:{
							'user':user1,
							'pass':pass1
						},
						dataType:"json",
						success:function(data){
							console.log(data)
							if(data.status==0){
								alert("账户不存在")
								$('.con6 span').html(Math.floor((Math.random()*10000%8999)+1000))
							}else if(data.status==1){
								alert("账户密码有误")
								$('.con6 span').html(Math.floor((Math.random()*10000%8999)+1000))
							}else if(data.status==2){
								
								
								
								alert("登录成功")
								
								var user1 = $('#user').val()
								sessionStorage.user = JSON.stringify(user1);
								window.location.href="学生信息管理.html"
							}
						
						}
					})
				}
			})
		
		//为啥封装的JS就可以 原生的就不行？？？
		// var ajax = new XMLHttpRequest();
		// 	ajax.open('get', 'http://student.qhynice.top/j_login.php');
		// 	ajax.send(formData);
				
		// 	ajax.onreadystatechange = function() {
		// 		if (ajax.readyState == 4 && ajax.status == 200) {
		// 			var data = JSON.parse(ajax.responseText);
		// 			console.log(data);
		// 		}
		// 	};
		
		
			
		</script>
	</body>
</html>
